<template>
  <div id="preChart"></div>
  <el-drawer v-model="drawer" :with-header="false">
    <el-descriptions title="设备信息" border column="1">
      <el-descriptions-item label="id">{{ currentDrawer.id }}</el-descriptions-item>
      <el-descriptions-item label="预处理图片"><img :src="currentDrawer.image" /></el-descriptions-item>
      <el-descriptions-item label="体积">{{ currentDrawer.size }}</el-descriptions-item>
      <el-descriptions-item label="state">{{ (currentDrawer.state) }}</el-descriptions-item>
      <el-descriptions-item label="doc">{{ (currentDrawer.doc) }}</el-descriptions-item>
    </el-descriptions>
  </el-drawer>
</template>

<script setup>
import G6 from '@antv/g6';
import { useRoute } from 'vue-router'
import { onMounted, ref } from 'vue';
import { handlePreLog } from '@/api.js'
const route = useRoute()
const data=ref({})
const userInfo = JSON.parse(localStorage.getItem('userInfo'))
const currentDrawer = ref({})
handlePreLog(route.query.id).then((res) => {
  console.log(res);
  data.value=res;
  const nodes = res.nodes;
  const clusterMap = new Map();
  let clusterId = 0;
  nodes.forEach(function (node) {
    if (node.cluster && clusterMap.get(node.cluster) === undefined) {
      clusterMap.set(node.cluster, clusterId);
      clusterId++;
    }
    const cid = clusterMap.get(node.cluster);
    if (!node.style) node.style = {};
    node.style.fill = colors[cid % colors.length];
    node.style.stroke = strokes[cid % strokes.length];
  });

  const preChart = document.getElementById('preChart');
  const width = preChart.scrollWidth;
  const height = preChart.scrollHeight || 500;
  const graph = new G6.Graph({
    container: 'preChart',
    width,
    height,
    modes: {
      default: ['zoom-canvas', 'drag-canvas', 'drag-node'],
    },
    layout: {
      type: 'grid',
      begin: [20, 20],
      width: width - 20,
      height: height - 20,
      sortBy: 'cluster',
    },
    animate: true,
    defaultNode: {
      size: 100,
    },
  });
  graph.data(res);
  graph.render();
  graph.on('node:dblclick', (e) => {
    currentDrawer.value = e.item._cfg.model
    console.log(currentDrawer.value);
    drawer.value = true
  })
  if (typeof window !== 'undefined')
    window.onresize = () => {
      if (!graph || graph.get('destroyed')) return;
      if (!preChart || !preChart.scrollWidth || !preChart.scrollHeight) return;
      graph.changeSize(preChart.scrollWidth, preChart.scrollHeight);
    };
})
const drawer = ref(false)
const colors = [
  '#BDD2FD',
  '#BDEFDB',
  '#C2C8D5',
  '#FBE5A2',
  '#F6C3B7',
  '#B6E3F5',
  '#D3C6EA',
  '#FFD8B8',
  '#AAD8D8',
  '#FFD6E7',
];
const strokes = [
  '#5B8FF9',
  '#5AD8A6',
  '#5D7092',
  '#F6BD16',
  '#E8684A',
  '#6DC8EC',
  '#9270CA',
  '#FF9D4D',
  '#269A99',
  '#FF99C3',
];
</script>

<style>

</style>